<template>
	<transition name="slide-fade">
		<div class='containerAll classify-search'>
			<div class="searchHeader">
				<search class="header" v-on:parentSearch="searchClick" v-on:searchEnter='searchEnterP'></search>
				<span class="cancel" @click="cancel">取消</span>
			</div>
			<div v-show="historySearch" class="historySearch">
				<div class="historySearchTop flex flex-1 flex-warp">
					<span class="history-text flex flex-1">历史搜索</span>
					<img @click="historyDelete" class="historyDelete" src="../../assets/imgs/del.png" />
				</div>
				<div class="item" v-for="(item,index) in searchName" :key="index" @click="historyItem(item)">
					{{item}}
				</div>

			</div>
			<div v-show="!historySearch">
				<tab class="kinds">
					<tab-item selected @on-item-click="onItemClick('')">综合</tab-item>
					<tab-item @on-item-click="onItemClick('carriageTime')" class='carriageTime'>
						<span>上新</span>
						<div v-show="triangle == 'carriageTime'" class="triangle-all">
							<div class="triangle-top" :class="[triangleFlag?'active-top':'gray-top']"></div>
							<div class="triangle-bottom" :class="[triangleFlag?'gray-bottom':'active-bottom']"></div>
						</div>
					</tab-item>
					<tab-item @on-item-click="onItemClick('saleNum')" class='carriageTime'>
						<span>销量</span>
						<div v-show="triangle == 'saleNum'" class="triangle-all">
							<div class="triangle-top" :class="[triangleFlag?'active-top':'gray-top']"></div>
							<div class="triangle-bottom" :class="[triangleFlag?'gray-bottom':'active-bottom']"></div>
						</div>
					</tab-item>
					<tab-item @on-item-click="onItemClick('price')" class='carriageTime'>
						<span>价格</span>
						<div v-show="triangle == 'price'" class="triangle-all">
							<div class="triangle-top" :class="[triangleFlag?'active-top':'gray-top']"></div>
							<div class="triangle-bottom" :class="[triangleFlag?'gray-bottom':'active-bottom']"></div>
						</div>
					</tab-item>
				</tab>
				<div class="contentCantainer mescroll" id="mescroll">
					<div class="content flex flex-warp flex-item-between">
						<div v-for="(item, index) in infos" :key='index' @click="toGoodsDetail(item)">
							<div v-if="index%2 == 0" class="contentLeft">
								<div class='labs flex flex-r flex-item-v-center'>
									<span class='flex flex-item-center' v-for="(itemi,index) in item.goodsLabels" v-bind:style='{backgroundColor: itemi.labelBackColor,color:itemi.labelColor}'>{{itemi.labelName}}</span>
								</div>
								<img v-lazy="item.attaUrl" />
								<div class="contentBottom">
									<p class="ecs ecs-2 title">{{item.goodsName}}</p>
									<div class="goods-info flex flex-c">
										<span class="price">月供：
										<span class="price-color">{{item.installmentAmount|fixedTwo()}}</span>
										</span>
										<span class="price">现价：￥{{item.price|fixedTwo()}}</span>
										<span class="base-price">市场价：￥{{item.basePrice|fixedTwo()}}</span>
									</div>
								</div>
							</div>
							<div v-else class="contentRight">
								<div class='labs flex flex-r flex-item-v-center'>
									<span class='flex flex-item-center' v-for="(itemi,index) in item.goodsLabels" v-bind:style='{backgroundColor: itemi.labelBackColor,color:itemi.labelColor}'>{{itemi.labelName}}</span>
								</div>
								<img v-lazy="item.attaUrl" />
								<div class="contentBottom">
									<p class="ecs ecs-2 title">{{item.goodsName}}</p>
									<div class="goods-info flex flex-c">
										<span class="price">月供：
										<span class="price-color">{{item.installmentAmount|fixedTwo()}}</span>
										</span>
										<span class="price">现价：￥{{item.price|fixedTwo()}}</span>
										<span class="base-price">市场价：￥{{item.basePrice|fixedTwo()}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<modal v-show='modalFlag' v-on:cancel='cancelClick' v-on:sure='sureClick'>
				<p slot='title' class="modalTitle">提示</p>
				<p slot='info' class="modalInfo">确定删除历史记录吗?</p>
			</modal>

		</div>
	</transition>
</template>

<script>
	import { Tab, TabItem } from 'vux'
	import Search from '@/components/huabanShop/search'
	import Modal from '@/components/huabanShop/modal'
	import http from '@/util/http'
	import Api from '@/util/api'
	import MeScroll from 'mescroll'
	export default {
		data() {
			return {
				historySearch: true,
				modalFlag: false,
				searchName: localStorage.getItem('searchName') ? localStorage.getItem('searchName').split(',') : [],
				infos: [],
				keyWord: '',
				triangle: '',
				triangleFlag: true,
				order: 'asc',
				pageNum: 1
				,total: 0
			}
		},
		mounted: function() {
			var self = this;
			self.mescroll = new MeScroll("mescroll", {
				down: {
					callback: self.downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
					,isBoth: false
				},
				up: {
					callback: self.upCallback, //上拉加载的回调
					isBounce: true //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
						,
					offset: 50,
					auto: false,
					isLock: true
				}
			});
		},
		created: function() {
			if(this.$route.query.searchGoodId) {
				let params = {
					numPerPage: 10,
					pageNum: 1,
					sort: '',
					order: "asc",
					catId: this.$route.query.searchGoodId
				};
				this.getgoods(params);
			}
		},
		components: {
			Tab,
			TabItem,
			Search,
			Modal
		},
		methods: {
			onItemClick(index) {
				this.pageNum = 1;
				console.log(index)
				//					this.mescroll.resetUpScroll()
				if(index == '') {
					this.triangleFlag = this.triangleFlag;
				}
				if(index == this.triangle) {
					this.triangleFlag = !this.triangleFlag;
				}
				if(this.triangleFlag) {
					this.order = 'asc';
				} else {
					this.order = 'desc';
				}
				this.triangle = index;
				if(this.keyWord) {
					var params = {
						numPerPage: 10,
						pageNum: 1,
						sort: index,
						order: this.order,
						keyWord: this.keyWord
					};
				} else {
					var params = {
						numPerPage: 10,
						pageNum: 1,
						sort: index,
						order: this.order,
						catId: this.$route.query.searchGoodId
					};
				}

				this.downCallback();
				this.mescroll.scrollTo(0, 0);

			},
			searchClick() {
				this.historySearch = true;
			},
			searchEnterP(ev, name) {
				this.pageNum = 1;
				this.mescroll.lockUpScroll();
				this.mescroll.endUpScroll(false)
				this.mescroll.scrollTo(0, 0);
				if(ev.keyCode == 13) {
					if(name) {
						if(this.searchName.indexOf(name) == (-1)) {
							this.searchName.push(name)
						}
						this.historySearch = false;
						localStorage.setItem('searchName', this.searchName)
						this.keyWord = name;
						this.downCallback();
					}
				}
			},
			historyDelete() {
				this.modalFlag = true;
			},
			cancelClick() {
				this.modalFlag = false;
			},
			sureClick() {
				this.searchName = [];
				localStorage.removeItem('searchName')
				this.modalFlag = false;
			},
			getgoods(params) {
				this.historySearch = false;
				this.$vux.loading.show({
					text: '加载中'
				});
				http.post(Api.queryGoodsList, params).then(res => {
					this.$vux.loading.hide();
					if(res.code == 200) {
						this.infos = res.data.rows;
						this.mescroll.endDownScroll();
						this.mescroll.lockUpScroll(false);
					} else {
						this.toast(res.message);
					}
				})
			},
			historyItem(item) {
				var self = this;
				this.pageNum = 1;
				let params = {
					numPerPage: 10,
					pageNum: 1,
					sort: "",
					order: "asc",
					keyWord: item
				};
				this.mescroll.endUpScroll(false);
				this.keyWord = item;
				this.infos = [];
				this.mescroll.lockUpScroll();
				
				this.downCallback();
				this.historySearch = false;
				this.mescroll.scrollTo(0, 0);
			},
			cancel() {
				if(this.$route.query.find) {
					this.$router.push("/find");
				} else {
					this.$router.push("/classify");
				}
			},
			toGoodsDetail(item) {
				this.$router.push("/goods?id=" + item.id);
			},
			downCallback(params) {
				console.log('down')
				if(this.keyWord) {
					var params = {
						numPerPage: 10,
						pageNum: 1,
						sort: this.triangle,
						order: this.order,
						keyWord: this.keyWord
					};
				} else {
					var params = {
						numPerPage: 10,
						pageNum: 1,
						sort: this.triangle,
						order: this.order,
						catId: this.$route.query.searchGoodId
					};
				}
				http.post(Api.queryGoodsList, params).then(res => {
					if(res.code == 200) {
						var self = this;
						this.pageNum = 1;
						this.infos = res.data.rows;
						this.total = res.data.total;
						this.mescroll.endDownScroll(false);
						if(this.infos.length == res.data.total) {
							this.mescroll.endUpScroll(true);
							setTimeout(function() {
								self.mescroll.lockUpScroll();
							}, 500)
							return;
						}
						this.mescroll.endUpScroll(false);
						this.mescroll.lockUpScroll(false);

					} else {
						this.toast(res.message)
					}
				})
			},
			upCallback(page) {
				console.log('up'+this.total)
//				if (this.total < 11) {
//					return;
//				}
				this.pageNum++;
				if(this.keyWord) {
					var params = {
						numPerPage: 10,
						pageNum: this.pageNum,
						sort: this.triangle,
						order: this.order,
						keyWord: this.keyWord
					};
				} else {
					var params = {
						numPerPage: 10,
						pageNum: this.pageNum,
						sort: this.triangle,
						order: this.order,
						catId: this.$route.query.searchGoodId
					};
				}
				console.log(this.pageNum)
				http.post(Api.queryGoodsList, params).then(res => {
					if(res.code == 200) {
						this.infos = [...this.infos, ...res.data.rows];
						this.mescroll.endUpScroll(false)
						if(this.infos.length == res.data.total) {
							this.mescroll.endUpScroll(true);
							this.mescroll.lockUpScroll();
						}

						//						
						//						this.mescroll.endUpScroll(false)
						//						if (res.data.rows.length == 0) {
						//							this.mescroll.lockUpScroll();
						//							this.toast('数据加载完成');
						//							return;
						//						}
						//						for (let i = 0; i < res.data.rows.length; i++) {
						//							this.infos.push(res.data.rows[i]);
						//							
						//							if (this.infos.length == res.data.total) {
						//								this.mescroll.lockUpScroll();
						//								this.toast('数据加载完成');
						//								return;
						//							}
						//						}
					} else {
						this.toast(res.message)
					}
				})
			}
		},
		filters: {
			fixedTwo(price) {
				if(price) {
					return Number(price / 100).toFixed(2);
				}
				return "0.00";
			}
		}
	}
</script>

<style lang="less" rel="stylesheet/less">
	@import '../../assets/css/mescroll.min.css';
	
	.classify-search {
		.slide-fade-enter-active {
		transition: all .5s ease;
	}
	
	.mescroll-upwarp {
		padding-bottom: 1.6rem;
	}
	
	.slide-fade-leave-active {
		transition: all 0s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}
	
	.slide-fade-enter,
	.slide-fade-leave-to
	/* .slide-fade-leave-active 在低于 2.1.8 版本中 */
	
	{
		transform: translateX(7.5rem);
		opacity: 0;
	}
	
	.vux-tab {
		height: 1rem !important;
	}

	
	
	.vux-tab .vux-tab-item {
		color: #909090 !important;
		font-size: .3rem;
		line-height: 1rem !important;
	}
	
	.vux-tab .vux-tab-item.vux-tab-selected {
		color: #fbc200 !important;
	}
		.vux-tab-ink-bar {
			background-color: transparent !important;
		}
		height: 100vh;
		overflow: hidden;
		.triangle-all {
			position: relative;
			top: .3rem;
			left: .06rem;
		}
		.gray-bottom {
			border: .08rem solid transparent;
			border-top-color: #909090;
		}
		.gray-top {
			border: .08rem solid transparent;
			border-bottom-color: #909090;
		}
		.active-bottom {
			border: .08rem solid transparent;
			border-top-color: #fbc200;
		}
		.active-top {
			border: .08rem solid transparent;
			border-bottom-color: #fbc200;
		}
		.triangle-top {
			width: 0;
			height: 0;
		}
		.triangle-bottom {
			margin-top: .06rem;
			width: 0;
			height: 0;
		}
		.searchHeader {
			width: 7.5rem;
			background: #ffffff;
			position: fixed;
			z-index: 10;
			top: 0;
			.header {
				width: 6.6rem;
				background: #ffffff;
			}
			.cancel {
				font-size: .28rem;
				color: #909090;
				position: absolute;
				right: .3rem;
				top: .28rem;
			}
		}
		.kinds {
			position: fixed;
			z-index: 10;
			top: .9rem;
			width: 100%;
			height: .88rem;
			line-height: .88rem;
			color: #464646;
			font-size: .3rem;
			background: #FFFFFF;
			border-top: 1px solid #F2F2F2;
			padding-top: 0;
			p {
				text-align: center;
			}
			.carriageTime {
				display: flex;
				justify-content: center;
			}
		}
		.contentBottom {
			padding: .3rem;
		}
		.contentCantainer {
			height: 100vh-3.9rem;
			overflow: scroll;
			position: relative;
			top: 1.9rem;
			padding-bottom: 2rem;
			z-index: 0;
			background: #F2F2F2;
		}
		.content {
			justify-content: space-between;
			.contentLeft {
				width: 3.66rem;
				min-height: 6.33rem;
				background: #FFFFFF;
				margin-top: .18rem;
				position: relative;
				.labs {
					position: absolute;
					top: .01rem;
					right: .01rem;
					z-index: 9;
					span {
						border-radius: .08rem;
						height: .3rem;
						font-size: .15rem;
						color: #fff;
						padding: .04rem .04rem;
						margin-right: .06rem;
					}
				}
			}
			.contentRight {
				width: 3.66rem;
				min-height: 6.33rem;
				background: #FFFFFF;
				margin-top: .18rem;
				position: relative;
				.labs {
					position: absolute;
					top: .01rem;
					right: .01rem;
					z-index: 9;
					span {
						border-radius: .08rem;
						height: .3rem;
						font-size: .15rem;
						color: #fff;
						padding: .04rem .04rem;
						margin-right: .06rem;
					}
				}
			}
			img {
				width: 3.66rem;
				height: 3.66rem;
			}
			.title {
				height: .84rem;
				font-size: .3rem;
				color: rgba(70, 70, 70, 1);
				line-height: .42rem;
			}
			.price-color {
				font-size: .3rem;
				color: #FC324B;
			}
			.goods-info {
				margin-top: .25rem;
			}
			.price {
				color: #909090;
				font-size: .24rem;
			}
			.base-price {
				color: #BCBCBC;
				font-size: .24rem;
				display: block;
				text-decoration: line-through
			}
		}
		.historySearch {
			position: fixed;
			top: .9rem;
			.historySearchTop {
				height: .6rem;
				line-height: .6rem;
				padding: 0 .3rem;
				width: 6.9rem;
				justify-content: space-between;
			}
			.history-text {
				font-size: .3rem;
				color: #464646;
			}
			.historyDelete {
				width: .35rem;
				height: .35rem;
				margin-top: .1rem;
			}
		}
		.item {
			height: 1rem;
			line-height: 1rem;
			color: #464646;
			font-size: .3rem;
			width: 6.9rem;
			margin-left: .3rem;
			border-bottom: 1px solid #E6E6E6;
		}
		.modalTitle {
			color: #464646;
			font-size: .32rem;
			font-weight: 500;
			text-align: center;
			height: .78rem;
			line-height: .78rem;
			padding-top: .23rem;
		}
		.modalInfo {
			color: #909090;
			font-size: .28rem;
			text-align: center;
			height: .74rem;
			line-height: .74rem;
			padding-bottom: .52rem;
		}
	}
</style>